<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import Segmented from "@/components/ReSegmented";
import {
  taskTypeOptions,
  triggerTypeOptions,
  roleOptions
} from "./utils/enums";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    name: "",
    type: "",
    triggerType: "",
    month: 0, // 月份
    day: 0, // 天
    hour: 0, // 小时
    minute: 0, // 分钟
    second: 0, // 秒
    role: "",
    content: "",
    url: "",
    url_agent: ""
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

// 显式切换
function changeTriggerType(value) {
  newFormInline.value.triggerType = value.option.value;
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="82px"
  >
    <el-form-item label="任务名称" prop="name">
      <el-input
        v-model="newFormInline.name"
        clearable
        placeholder="请输入任务名称"
      />
    </el-form-item>
    <el-form-item label="任务类型" prop="type">
      <el-select v-model="newFormInline.type" placeholder="请选择任务类型">
        <el-option
          v-for="item in taskTypeOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="触发类型" prop="triggerType">
      <Segmented
        v-model="newFormInline.triggerType"
        :options="triggerTypeOptions"
        @change="changeTriggerType"
      />
    </el-form-item>
    <!-- 根据不同触发类型，显示不同时间表格 -->
    <div class="time-picker">
      <el-row>
        <el-col v-if="newFormInline.triggerType === 'everymonth'" :span="8">
          <el-form-item label="月" prop="month">
            <el-input-number
              v-model="newFormInline.month"
              controls-position="right"
              :min="1"
              :max="12"
            />
          </el-form-item>
        </el-col>
        <el-col
          v-if="
            newFormInline.triggerType !== 'interval' &&
            newFormInline.triggerType !== 'intervalminute' &&
            newFormInline.triggerType !== 'intervalhour'
          "
          :span="8"
        >
          <el-form-item label="天" prop="day">
            <el-input-number
              v-model="newFormInline.day"
              controls-position="right"
              :min="1"
              :max="31"
            />
          </el-form-item>
        </el-col>
        <el-col
          v-if="
            newFormInline.triggerType !== 'interval' &&
            newFormInline.triggerType !== 'intervalminute'
          "
          :span="8"
        >
          <el-form-item label="时" prop="hour">
            <el-input-number
              v-model="newFormInline.hour"
              controls-position="right"
              :min="0"
              :max="24"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="newFormInline.triggerType === 'intervalminute'" :span="8">
          <el-form-item label="分" prop="minute">
            <el-input-number
              v-model="newFormInline.minute"
              controls-position="right"
              :min="0"
              :max="60"
            />
          </el-form-item>
        </el-col>
        <el-col v-if="newFormInline.triggerType === 'interval'" :span="8">
          <el-form-item label="秒" prop="second">
            <el-input-number
              v-model="newFormInline.second"
              controls-position="right"
              :min="0"
              :max="60"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <div v-if="newFormInline.type == 'shhscript'">
      <el-form-item label="执行用户" prop="role">
        <el-select v-model="newFormInline.role" placeholder="请选择执行用户">
          <el-option
            v-for="item in roleOptions"
            :key="item.value"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="任务内容" prop="content">
        <el-input
          v-model="newFormInline.content"
          clearable
          placeholder="请输入任务内容"
        />
      </el-form-item>
    </div>
    <div v-if="newFormInline.type == 'http'">
      <el-form-item label="URL" prop="url">
        <el-input
          v-model="newFormInline.url"
          clearable
          placeholder="请输入URL"
        />
      </el-form-item>
      <el-form-item label="URL_AGENT" prop="url_agent">
        <!-- 文本域 -->
        <el-input
          v-model="newFormInline.url_agent"
          type="textarea"
          clearable
          placeholder="请输入URL_AGENT"
        />
      </el-form-item>
    </div>
  </el-form>
</template>

<style lang="scss" scoped>
.time-picker {
  .time-label label {
    width: 10px !important;
  }

  .time-input {
    width: 100%;
  }
}
</style>
